<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery.js">
</script>
<script>
var request;
function read(group_id){
	request=new XMLHttpRequest();
	request.open("post","group_main_visit.action?group_id="+group_id,true);
	request.send();
	//request.onreadystatechange=display;
}
function addmembers(group_id){
	request=new XMLHttpRequest();
	var mem = document.getElementById('addmember').value;
	request.open("post","group_add_member.action?group_id="+group_id+"&email_id="+mem,true);
	request.send();
	request.onreadystatechange=display_members;
}
function deletemembers(email_id){
	request=new XMLHttpRequest();
	//var mem = document.getElementById('addmember').value;
	request.open("post","group_delete_member.action?email_id="+email_id,true);
	request.send();
	request.onreadystatechange=display_members;
}
function display(){
	document.getElementById('loader').innerHTML=request.responseText;
	//reload();
}
function display_members(){
	document.getElementById('members').innerHTML=request.responseText;
	//reload();
}
function reload(){
	
}

</script>
<style type="text/css">
#grpdet {
	width: 1100px;
	height: 500px;
	
}
#addmemberlink{
	background-image: url("images/addmember.png");
}
#addmemberlink:HOVER{
	border: 1px solid darkgray;
}
#addmembertext{
	border: 1px solid #0C7CD7;
}
#addmembertext:HOVER{
	border: 1px solid #0966B2;
}
#member_count{
	background-color: #8C0DC6;
	border: 1px solid #770AA9;
}
.scrolla { width:900px; height:504px; overflow-y:auto; overflow-x:auto; clip-rect:(0px, 900px, 504px, 0px); }
.scro { width:200px; height:218px; overflow-y:auto; overflow-x:auto; clip-rect:(0px, 200px, 218px, 0px); }
.scro_doc { width:200px; height:178px; overflow-y:auto; overflow-x:auto; clip-rect:(0px, 200px, 178px, 0px); }
</style>
</head>
<body>
<table id="grpdet">
	<tr>
		<td colspan="2" width="1100px" height="10%">
		<s:iterator value="groups">
			<table width="1100px">
				<tr>
					<td align="left" valign="bottom" height="10%"><font style="font-family: calibri; font-size: x-large; color: #414040;"><b>&emsp;<s:property value="group_name"/></b></font></td>
					
					<td align="right">
					<table>
					<tr><td height="10px"></td></tr>
					<tr>
					<td align="right"><font style="font-family: calibri; font-size: small; color: grey;">Created By: </font></td>
					<td align="left"><font style="font-family: calibri; font-size: small; color: #414040;"><b>&ensp;<s:property value="owner_name"/></b></font></td>
					<td width="20px"></td>
					<td align="right"><font style="font-family: calibri; font-size: small; color: grey;">Create date: </font></td>
					<td><font style="font-family: calibri; font-size: small; color: #414040;"><b>&ensp;<s:property value="create_date"/></b></font></td>
					<td width="20px"></td>
					<td align="right"><font style="font-family: calibri; font-size: small; color: grey;">Last Update On: </font></td>
					<td><font style="font-family: calibri; font-size: small; color: #414040;"><b>&ensp;<s:property value="last_update_date"/></b></font></td>
					</tr>
					</table>
					</td>
				
				</tr>
				<tr><td colspan="2" height="10px"><hr></td></tr>
				
				
			</table>
			</s:iterator>
		</td>
	</tr>
	<tr>
		<td>
			<table>
				
				<tr>
					<td  style="border-right: 1px solid lightgray; background-color: white;"><table>
					<!-- 
					<tr>
						<td align="center">
							&emsp;<s:textarea cols="75" rows="1" name="post_comment"/>
							
						</td>
					</tr>
					<tr><td style="font-family: calibri; font-size: small;" colspan="2" align="right"><a href="#">Post</a>&emsp;<a href="#">Upload</a></td>
					<td width="200px"></td>
					</tr>
	<tr><td colspan="2" style="border-bottom: 1px solid lightgrey;" height="5px"></td></tr>
	-->
					<tr>
					
					<td width="900px">
						<div class="scrolla">
						<%@ include file="/GroupMainUpdates.jsp" %>
						</div>
					
					</td>
					
					</tr>
					</table></td>
					<td width="200px">
						<table>
						<!-- 	
						<tr>
							<td  width="200px" height="15px" style="background-color: lightgrey;">
								<font style="font-family: calibri; font-size: small; color: #1E1E21;"><b>&emsp;Home</b></font>
							</td>
						</tr>
						<tr><td height="15px"></td></tr>
						 -->
						<tr>
							<td  width="200px" height="15px" style="background-color: lightgrey;">
								<font style="font-family: calibri; font-size: small; color: #1E1E21;"><b>&emsp;Documents</b></font>
							</td>
						</tr>
						<tr><td height="200px" style="border-bottom: 1ps solid lightgray;">
						<div class="scro_doc">
							<table>
								<tr>
									<td>
										<!-- .............. Documents list page to be added (%include file) ................... -->
									</td>
								</tr>
							</table>
						</div>
						</td></tr>
						<tr><td height="15px"></td></tr>
						<tr>
							<td id="members">
								<table>
									<tr><td height="15px" style="background-color: lightgrey;"><table><tr><td><font style="font-family: calibri; font-size: small; color: #1E1E21; "><b>&emsp;Members&emsp;</b></font></td><td width="20px"></td><td id="member_count"><b><font color="white" style="font-family: calibri; font-size: small;">&ensp;<s:property value="group_member_count"/>&ensp;</font></b></td></tr></table></td></tr>
									<tr><td height="5px"></td></tr>
									<tr>
										<td><table><tr>
										<td width="5px"></td>
										<td id="addmembertext">
											<input type="text" name="addmember" id="addmember" size="23">
										</td>
										<td id="addmemberlink" onclick="addmembers('<s:property value="#session['group_id']"/>')" width="25px"><!-- <img src="images/addmember.png"> --></td>
										</tr></table></td>
									</tr>
									<tr><td height="5px"></td></tr>
									<tr><td><div class="scro"><table>
									<s:iterator value="group_members">
									<tr>
									
										<td>
											&emsp;<font style="font-family: calibri; font-size: small; color: #080A55;"><s:property value="member_id"/></font>
										</td>
										<td width="40px"></td>
										<td id="delete_comment" onclick="deletemembers('<s:property value="email_id"/>')"><font color="white" style="font-family: calibri; font-size: small">&ensp;x&ensp;</font></td>
										
									</tr>
									</s:iterator>
									
									</table></div></td></tr>
								</table>
							</td>
						</tr>
						</table>
					</td>
					
				</tr>
			</table>
		</td>
	</tr>
	
</table>
</body>
</html>